<template>
  <div class="container">
    <div class="flex flex-wrap f-ptp10">
      <el-input class='f-mrt20 f-mbt10 f-w120' clearable v-model="userId" placeholder="律师ID"></el-input>
      <el-input class='f-mrt20 f-mbt10 f-w150' clearable v-model="mobileNo" placeholder="手机号"></el-input>
      <el-input class='f-mrt20 f-mbt10 f-w120' clearable v-model="name" placeholder="姓名"></el-input>
      <el-date-picker
        class='f-mrt20'
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button class='f-h40' @click="getList" type="primary">查询</el-button>
    </div>

    <div class='tab'>
      <span @click="getState('applied')" :class="{'tab-active' : state == 'applied'}">待审核</span>
      <span @click="getState('refused')" :class="{'tab-active' : state == 'refused'}">已拒绝</span>
    </div>
    <div>
      <el-table
        :data="auditList"
        border
        style="width: 100%">
        <el-table-column prop="userId" label="律师ID" width="180"></el-table-column>
        <el-table-column prop="mobileNo" label="手机号" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180">
          <template slot-scope="scope">
            <span>{{ tranDate(scope.row.createTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="manage" label="管理">
          <template slot-scope="scope">
            <span v-if="state == 'applied'" @click='auditBtnClickEvent(scope.row)' class='s-c-green f-csp'>审核</span>
            <span v-if="state == 'refused'" @click='auditBtnClickEvent(scope.row)' class='s-c-green f-csp'>查看</span>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="totalCount > 0" class='f-ptp20 f-pbt20'>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>

    <AuditDialog :title='dialogTitle' :auditId='auditId' :state='auditState' :show='dialogVisible' @close='closeAuditDialog' />

    <!-- <el-dialog
      title="律师审核"
      :visible.sync="dialogVisible"
      width="560px">
      <div class='d-item'>
        <label for="">律师姓名</label>
        <p>张三</p>
      </div>
      <div class='d-item'>
        <label for="">身份证号</label>
        <p>张三</p>
      </div>
      <div class='d-item'>
        <label for="">性别</label>
        <p>张三</p>
      </div>
      <div class='d-item'>
        <label for="">常用邮箱</label>
        <p>张三</p>
      </div>
      <div class='d-item'>
        <label for="">微信</label>
        <p>张三</p>
      </div>
      <div class='d-item'>
        <label for="">执业证号</label>
        <p>张三</p>
      </div>
      <div class='d-item'>
        <label for="">所在地区</label>
        <p>张三</p>
      </div>
      <div class='d-item'>
        <label for="">擅长专长</label>
        <p>张三</p>
      </div>
      <div class='d-item'>
        <label for="">执业律所</label>
        <p>张三</p>
      </div>
      <div class='d-item'>
        <label for="">详细地址</label>
        <p>张三</p>
      </div>
      <div class='d-item'>
        <label for="">图片信息</label>
        <p>张三</p>
      </div>
      <div class="d-footer">
        <el-button type="primary" @click="dialogVisible = false">通 过</el-button>
        <el-button type="primary" @click="dialogVisible = false">拒 绝</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import AuditDialog from './AuditDialog'
export default {
  name: 'LawyerAuditManage',
  components: {
    'AuditDialog': AuditDialog
  },
  data() {
    return {
      dialogTitle: '律师审核',
      auditState: 'apply', // apply 申请审核, refuse 已拒绝
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      state: 'applied',  // 审核状态
      dialogVisible: false,
      isTabActive: true,
      userId: '', // 律师id
      auditId: '', // 当前选择审核id
      mobileNo: '',
      name: '',  // 律师姓名
      date: '',
      auditList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 关闭审核弹窗
    closeAuditDialog(isGetList) {
      this.dialogVisible = false;
      if(isGetList) {
        this.getList();
      }
    },
    // 日期转换
    tranDate(date) {
      return this._utils.format(date, 'yyyy-mm-dd');
    },
    // 获取审核主题
    getState(state) {
      this.state = state;
      this.getList();
    },
    // 获取律师审核列表
    getList() {
      let startDay = '';
      let endDay = '';
      if(this._utils.getType(this.date) == 'Array') {
        startDay = this._utils.format(this.date[0], 'yyyy-mm-dd');
        endDay = this._utils.format(this.date[1], 'yyyy-mm-dd');
      }
      this.$store.dispatch('GET_LAWYER_AUDIT_LIST', {
        pageNum: this.currentPage - 1,
        pageSize: this.pageSize,
        state: this.state,
        userId: this.userId,
        name: this.name,
        mobileNo: this.mobileNo,
        startDay,
        endDay,
      }).then(res => {
        if(res.data.retCode == 0) {
          this.auditList = res.data.data;
          this.totalCount = res.data.totalCount;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    // 审核按钮点击事件
    auditBtnClickEvent(item) {
      console.log('item:::', item);
      this.dialogTitle = '律师审核';
      this.auditId = item.id;
      if(this.state == 'applied') {
        this.auditState = 'apply';
      } else {
        this.auditState = 'refuse';
      }
      
      this.dialogVisible = true;
    },

    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tab{
  padding-bottom: 10px;
}
.tab>span{
  display: inline-block;
  line-height: 40px;
  padding: 0 20px;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
.tab>span:nth-of-type(1) {
  border-left: 1px solid #ebeef5;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.tab>span:nth-of-type(2) {
  border-right: 1px solid #ebeef5;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.tab>.tab-active{
  background-color: #8094E7;
  color: #fff;
}

.d-item{
  overflow: hidden;
}
.d-item>label{
  width: 80px;
  line-height: 32px;
  text-align: right;
  float: left;
}
.d-item>p{
  line-height: 32px;
  float: left;
  padding-left: 20px;
}
.d-footer{
  text-align: center;
  padding-top: 20px;
}
</style>
